<template>
  <div class="app-container" >
    <div>
        <el-card  class="padding-20 flex-auto"  style="margin: 20px 0">
          <div class="title">指标1：副高级及以上职称人员比例</div>
          <el-row :gutter="20" >
            <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="info-container"  style="height: 255px">
                <div class="sub-title">28.5%</div>
                <div class="mini-text">副高级及以上职称人员</div>
                <div class="scale">342 / 1200</div>
                <div class="mini-text">副高级及以上/总人数</div>
                <div class="mini-text">计算方法: ( 副高级及以上职称人数 ) / ( 卫生技术人员总数 )*100%</div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;height: 100%" :xs="24" :sm="24" :md="12" :lg="12">
              <div class="flex">
                <EchartsComponent :options="chartOption1" class="flex-auto" style="height: 255px"></EchartsComponent>
              </div>
            </el-col>
          </el-row>
          <img src="@/assets/static/卫生技术人员-图.png" class="backImg" alt="">
        </el-card>
        <el-row :gutter="20">
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div class="flex-auto  padding-20" style="background-color: #FFFFFF;border-radius: 13px;">
            <EchartsComponent :options="chartOption2" class="flex-auto" style="height: 280px;border-radius: 13px;">
              <div  style="position: absolute;top: -10px;right: 0px;z-index: 10;width: 200px;">
                <div style="font-weight: 600;text-align: right;font-size: 26px">450</div>
                <div style="text-align: right;">注册医师总人数</div>
              </div>
            </EchartsComponent>
            <img src="@/assets/static/科室医生比例.png" class="backImg" style="width: 100%" alt="">
          </div>
         </el-col>
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div class="flex-auto padding-20" style="background-color: #FFFFFF;border-radius: 13px;">
            <div style="height: 280px">
              <div class="charts-title">医护比</div>
              <div class="flex justify-content-space-between" style="gap: 20px">
                <div class="info-container flex-auto">
                  <div class="sub-title">28.5%</div>
                  <div class="mini-text">医护比</div>
                  <div class="scale">342 / 1200</div>
                  <div class="mini-text">注册医师数 / 注册护士数</div>
                  <div class="mini-text">计算方法: ( 注册医师数 ) / ( 注册护士数 )</div>
                </div>
                <EchartsComponent :options="chartOption3" class="flex-auto " style=""></EchartsComponent>
              </div>
            </div>
            <img src="@/assets/static/医护比.png" class="backImg " style="width: 100%" alt="">


          </div>
         </el-col>
        </el-row>
        <div style="margin: 20px 0">
        <div class="sub-title">指标说明</div>
        <el-card class="padding-top-bottom-16 " >
          <li class="item">指标1衡量医院高级专业人才的占比，反映医院的整体专业水平。</li>
          <li class="item">指标2反映医院在各个重要专科的人才分布情况 , 确保各科室人才配置合理。</li>
          <li class="item">指标3评估医院的医护人员配比是否合理，以确保优质的医疗服务和患者护理。</li>
        </el-card>      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const chartOption1 = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '高级职称医务人员', itemStyle: { color: '#5470c6' } },
        { value: 735, name: '同期医务人员总数', itemStyle: { color: '#91cc75' } },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
const chartOption2 = ref(
    {
      title: {
        text: '各科室百分比数据',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['麻醉', '儿科', '重症', '病理', '中医', '感染病'],
        axisLabel: {
          interval: 0,
        }
      },
      yAxis: {
        type: 'value',
        interval: 2,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [
        {
          name: '百分比',
          type: 'bar',
          itemStyle: {
            color: function(params) {
              // 自定义颜色
              var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
              return colorList[params.dataIndex];
            }
          },
          data: [5, 8.5, 6.5, 3, 7.5, 5]
        }
      ]
    }
);
const chartOption3 = ref({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['医师', '护士'],
        axisLabel: {
          interval: 0,
        }
      },
      yAxis: {
        type: 'value',
        interval: 100,
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          itemStyle: {
            color: function(params) {
              // 自定义颜色
              var colorList = ['#5470c6', '#91cc75'];
              return colorList[params.dataIndex];
            }
          },
          data: [450, 550]
        }
      ]
    }
);
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;

  }
  .title{
    color:#464646;
    font-size: 18px;
    font-weight: 600;
   }
  .info-container{
        padding-top: 40px;
       .sub-title{
         font-size: 28px;
         font-weight: 600;
       }
       .mini-text{
         color: #858E98;
         padding: 4px 0;
       }
       .scale{
         font-size: 18px;
         font-weight: 800;
         padding: 5px 0 5px 0;
       }
  }
  .backImg{
       margin-top: 20px;
       width: 100%;
       display: block;
       border-radius: 10px;
   }
  .charts-title {
    color: #5a5959;
    font-size: 18px;
    font-weight: bold;
    z-index: 10; // 确保标题在图表上方
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    position: relative; // 确保子元素可以绝对定位
  }
  .sub-title{
    padding: 10px 0;
    color: #5a5959;
    font-size: 22px;
    font-weight: bold;
  }
  .item{
     padding: 4px 0 4px 20px;
     color: #5a5959;
  }
}
</style>
